
import React from 'react';
import { render, View, Text, Artboard } from 'react-sketchapp';
import { colors, fonts, buttons, navBar, formItem, icoNames } from '../theme';

import IconList from './components/IconList';
import Palette from './components/Palette';
import Section from './components/Section';
import FontText from './components/FontText';
import Button from '../components/Button';
import CheckBox from '../components/CheckBox';
import SwitchBox from '../components/SwitchBox';
import ImagePicker from '../components/ImagePicker';
import NoticeBar from '../components/NoticeBar';
import Toast from '../components/Toast';
import FormItem from '../components/FormItem';
import SingleList from '../components/SingleList';
import TwiceList from '../components/TwiceList';
import NavBar from '../components/NavBar';
import Modal from '../components/Modal';
import InputMsg from '../components/InputMsg';
import ModalMsg from '../components/ModalMsg';
import SystemIcon from '../components/SystemIcon';


const Document = () => (
  <Artboard style={{
    display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: 2340,
  }}
  >
    <View style={{ backgroundColor: '#eee', width: 750 }}>
      <Section title="Colors">
        <Palette colors={colors} />
      </Section>
      <Section title="NavBar">
        <View style={{ width: 750 }}>
          <NavBar icon="backNor" label="NormalBav" />
          <NavBar icon="backWhite" label="NormalBav" theme={navBar.themeNav} />
        </View>
      </Section>
      <Section title="Buttons">
        <View style={{ width: 690 }}>
          <Button label="Primary" />
          <Button label="Tap" theme={buttons.tap} />
          <Button label="Disabled" theme={buttons.disabled} />
          <Button label="Normal" theme={buttons.normal} themeStyle="btn-default" />
        </View>
        <View style={{ width: 690 }}>
          <Button label="页面次要SecPrimary" theme={buttons.secPrimary} themeStyle="btn-sec" />
          <Button label="页面次要SecTap" theme={buttons.secPrimary} themeStyle="btn-sec" />
          <Button label="页面次要SecDisabled" theme={buttons.secDisabled} themeStyle="btn-sec" />
        </View>
        <View style={{ width: 690 }}>
          <Button label="按钮" theme={buttons.littlePrimary} themeStyle="btn-lit" />
          <Button label="按下" theme={buttons.littleTap} themeStyle="btn-lit" />
          <Button label="禁用" theme={buttons.littleDisabled} themeStyle="btn-lit" />
        </View>
      </Section>

      <Section title="Checkbox && SwitchBox">
        <View style={{
          width: 690, display: 'flex', flexDirection: 'row', alignItems: 'center',
        }}
        >
          <CheckBox checkBoxStyle="radio" />
          <CheckBox checkBoxStyle="radio" checked />

          <CheckBox checkBoxStyle="checkBox" />
          <CheckBox checkBoxStyle="checkBox" checked />

          <SwitchBox />
          <SwitchBox checked />
        </View>
      </Section>

      <Section title="ImagePicker" >
        <View style={{
          width: 690, display: 'flex', flexDirection: 'row', alignItems: 'center',
        }}
        >
          <ImagePicker ico />
          <ImagePicker />
        </View>
      </Section>
    </View>
    <View style={{ backgroundColor: '#eee', width: 750 }}>
      <Section title="FormItem">
        {/* 编辑前 */}
        <View style={{
          width: 750, display: 'flex', backgroundColor: '#fff', marginBottom: 30,
        }}
        >
          <FormItem
            label="姓名"
          >
            <Text style={{ fontSize: 30, color: colors.LightGray }}>提示信息</Text>
          </FormItem>
          <FormItem label="选项" icoArrow theme={formItem} />
          <FormItem label="选项(清除)" icoClear theme={formItem} />
          <FormItem
            label="手机号"
            status="disabled"
          >
            <Text style={{ fontSize: 30, color: colors.Gray }}>禁用例：182 1234 3213</Text>
          </FormItem>
          <FormItem
            label="公司电话"
            borderBottomColor="#fff"
            noBottomBorder
          >
            <Text style={{ fontSize: 30 }}>例：075581234567</Text>
          </FormItem>
        </View>
        {/* 错误提示 */}
        <View style={{
          width: 750, display: 'flex', backgroundColor: '#fff', marginBottom: 30,
        }}
        >
          <FormItem
            label="公司名称"
            noBottomBorder
            status="warn"
          >
            <Text style={{ fontSize: 30, color: '#F4333C' }}>错误深圳卫盈智信科技有限公司</Text>
          </FormItem>
        </View>

      </Section>

      <Section title="SingleList&&TwiceList">
        <View style={{
          width: 750, display: 'flex', backgroundColor: '#fff', marginBottom: 30,
        }}
        >
          <SingleList label="单行列表" icoArrow>
            <View style={{ width: 10, height: 10, backgroundColor: colors.Orange }} />
          </SingleList>
          <SingleList
            label="右边单行列表"
            labelRight={{ text: '123456', color: colors.Orange }}
            icoArrow
          > <View style={{ width: 20, height: 20, backgroundColor: colors.Orange }} />
          </SingleList>
          <SingleList
            label="右单行列表"
            labelRight={{ text: '未填', color: colors.Gray }}
            icoArrow
          >
            <View style={{ width: 30, height: 30, backgroundColor: colors.Orange }} />
          </SingleList>
          <SingleList
            label="右边单行列表"
            labelRight={{ text: '已填', color: colors.LightGray }}
            icoArrow
            noBottomBorder
          >
            <View style={{ width: 30, height: 30, backgroundColor: colors.Orange }} />
          </SingleList>
        </View>

        <View style={{ width: 750, marginBottom: 30, alignItems: 'center' }}>
          <TwiceList label="双行卡片" littleLabel="详细信息" icoArrow >
            <View style={{ width: 50, height: 50, backgroundColor: colors.Orange }} />
          </TwiceList>
        </View>
      </Section>
      <Section title="NoticeBar">
        <View style={{ width: 750, display: 'flex' }}>
          <NoticeBar iconRight={<SystemIcon icoName="noticeArrow" />} text="因全国公民身份系统升级，添加银行... " />
          <NoticeBar
            icoNotice
            iconRight={<SystemIcon icoName="noticeArrow" />}
            text="你的收付款额度超过限额(1万/笔、5万/..."
          />
        </View>
      </Section>
      <Section title="Toast">
        <View style={{ width: 750, display: 'flex', flexDirection: 'row' }}>
          <Toast label="成功提示" status="success" isShow />
          <Toast label="失败提示" status="error" isShow />
          <Toast label="警告提示" status="warning" isShow />
        </View>
        <Toast label="最长文案不超过14个字" noImg isShow />
      </Section>
    </View>
    <View style={{ backgroundColor: '#eee', width: 750 }}>
      <Section title="Modal">
        <View style={{
          width: 750, alignItems: 'center', height: 2800, justifyContent: 'space-between',
          }}
        >
          <Modal
            title="快速添加联系人"
            desc="授权通讯录可获取更高额度"
          >
            <Button label="Primary" theme={buttons.primary} />
          </Modal>
          <Modal
            title="快速添加联系人"
            desc="授权通讯录可获取更高额度"
          >
            <Button label="Primary" theme={buttons.primary} />
          </Modal>
          <ModalMsg
            desc="已发送至"
            phoneNum="186 6666 6666"
            btnLabel="确定"
          >
            <InputMsg textLeft="" rightLabel="59s后重新发送">
              <Text style={{ color: colors.LightGray, fontSize: 28 }}>自定义信息验证码</Text>
            </InputMsg>
            <Button label="Primary" />
          </ModalMsg>
        </View>
      </Section>
      <Section title="SystemIcon">
        <View style={{ width: 750 }}>
          <IconList icoNames={icoNames} />
        </View>
      </Section>
    </View>
  </Artboard>
);

export default (context) => {
  render(<Document />, context.document.currentPage());
};
